<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/detail.css">
		<link rel="icon" href="./icon/title_vagetable.png">
		<title>商品详情页面</title>
		<script src="./js/axios.min.js"></script>
		<script src="./js/axios.config.js"></script>
	</head>
	<body>
		<header>
			<img class="arrow" src="./img/shippingAddress/back.png" onclick="window.history.back(-1)" alt="">
			<ul class="tab">
				<li>商品</li>
				<li>详情</li>
			</ul>
			<img class="index" src="./img/shippingAddress/back.png" onclick="location.assign('./index.html')" alt="">
			<img class="forward" src="./img/shippingAddress/back.png" alt="">
		</header>
		<div class="main seltion">
			<img src="./img/shoppingCar/pic6.jpg" alt="">
			<div class="info">
				<div class="left">
					<div class="title">全棉色织绗缝多用件套</div>
					<div class="detail">夏季凉被，冬季暖套，四季可用</div>
					<div class="price">￥599 </div>
				</div>
				<div class="right">
					<div class="com"><span>469</span>用户评价 </div>
					<div class="check">查看</div>
				</div>
			</div>
		</div>
		<ul class="op seltion">
			<li>规格数量选择
				<img src="./img/collection/icon-angle.png" alt="">
			</li>
			<li>1个促销：<span>120款爆品满3件8折</span>
				<img src="./img/collection/icon-angle.png" alt="">
			</li>
			<li>积分：<span>购买最高可得59积分</span>
				<img src="./img/collection/icon-angle.png" alt="">
			</li>
			<li><span class="title">服务：</span>
				<div class="server">
					<span>30天无忧退换货</span>
					<span>48小时快速退款</span>
					<span>满88元免邮费 </span>
					<img src="./img/collection/icon-angle.png" alt="">
				</div>
			</li>
		</ul>
		<div class="comment seltion">
			<div class="all">
				<div class="title">用户评价：(536)</div>
				<div class="detail">
					<span>99.1% 好评</span>
					<img src="./img/collection/icon-angle.png" alt="">
				</div>
			</div>
			<div class="com_detail">
				<div class="title">
					<img class="avatar" src="./img/index/banner.jpg" alt="">
					<span class="nickname">x****n</span>
					<img class="vip" src="./icon/title_vagetable.png" alt="">
					<span class="star">
						<img src="./icon/title_vagetable.png" alt="">
						<img src="./icon/title_vagetable.png" alt="">
						<img src="./icon/title_vagetable.png" alt="">
						<img src="./icon/title_vagetable.png" alt="">
						<img src="./icon/title_vagetable.png" alt="">
					</span>
				</div>
				<div class="order-detail">2017.12.4 10：20灰紫：1.8M</div>
				<div class="info">
					<span>质感相当不错，很舒服，本人比较喜欢</span>
					<div class="image">
						<img src="./img/index/gthing3.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="goods_detail seltion">
			<div class="title">商品详情</div>
			<div class="detail">
				<img src="./img/index/banner.jpg" alt="">
				<div class="info">窗边响起一阵蝉鸣<br>转身抱紧被子，夏日午后，正当酣眠</div>
				<img src="./img/index/banner.jpg" alt="">
				<div class="info">
					<div>一被多用</div>可以做春凉被的四件套
				</div>
				<div class="image">
					<img src="./img/index/banner.jpg" alt="">
					<img src="./img/index/banner.jpg" alt="">
				</div>
			</div>
		</div>
		<div class="buttom_op">
			<div class="content">
				<img src="./icon/title_vagetable.png" alt="">
			</div>
			<div class="shop_car">
				<img src="./icon/title_vagetable.png" alt="">
			</div>
			<div class="like">
				<img src="./icon/title_vagetable.png" alt="">
			</div>
			<div class="add_car">加入购物车</div>
			<div class="buy">立即购买</div>
		</div>
		<div class="mask"></div>
		<div class="select">
			<div class="info">
				<img src="./img/index/banner.jpg" alt="">
				<div class="detail">
					<div class="price">价格：￥599</div>
					<div class="tip">请选择规格属性</div>
				</div>
			</div>
			<div class="color kind">
				<div class="title">颜色</div>
				<ul>
					<li>灰紫</li>
					<li>浅咖色</li>
				</ul>
			</div>
			<div class="size kind">
				<div class="title">尺寸</div>
				<ul>
					<li>1.2M</li>
					<li>1.8M</li>
				</ul>
			</div>
			<div class="kind">
				<div class="title">数量</div>
				<div class="quantity">
					<div class="reduce">-</div>
					<input class="detail" value="1">
					<div class="add">+</div>
				</div>
			</div>
			<div class="close"><img src="./img/shippingAddress/icon5.png" alt=""></div>
			<div class="save">确认</div>
		</div>
		<script>
			let oAdd_car = document.querySelector('.add_car')
			let oBuy = document.querySelector('.buy')
			let oMask = document.querySelector('.mask')
			let oSelcet = document.querySelector('.select')
			oAdd_car.addEventListener('click' ,function(){
				oSelcet.style.transform = 'translateY(0)'
				oMask.style.display = 'block'
			})
			oBuy.addEventListener('click' ,function(){
				oSelcet.style.transform = 'translateY(0)'
				oMask.style.display = 'block'
			})
			let oClose = document.querySelector('.close')
			oClose.addEventListener('click',function(){
				oSelcet.style.transform = 'translateY(100%)'
				oMask.style.display = 'none'
			})
		</script>
	</body>
</html>
